<template>
  <div class="left w-[200px] height-full mr-[20px]" >
    <el-input v-model="name"
    placeholder="输入部门名称搜索"
    clearable
    class="mb-[10px]"
    @input="changeName"
    ></el-input>
    <el-tree
      @node-click="handleNodeClick"
      :props="props"
      :load="loadNode"
      :data="data"
      lazy>
    </el-tree>
  </div>
</template>
<script>
import { getDept } from '@/api/dept'
import _ from 'lodash' // 导入lodash库
export default {
  name: 'Left',
  components: {},
  data () {
    return {
      name: null, // 搜索名称
      data: [],
      props: {
        label: 'name',
        children: 'zones', // 下级字段
        isLeaf: 'leaf'
      }
    }
  },
  computed: {},
  watch: {

  },
  mounted () {
  },
  methods: {
    // 页面加载时自动获取部门
    loadNode (node, resolve) {
      getDept({ pid: node.data.id }).then(res => {
        resolve(res.content)
        // console.log(res.content)
      })
    },
    // 搜索
    changeName: _.debounce(function () {
      const params = this.name ? { name: this.name } : {}
      getDept(params).then(res => {
        this.data = res.content
      })
    }, 500),
    handleNodeClick (data) {
      this.$store.commit('SET_DeptId', data.id)
    }
  }
}
</script>
<style lang="scss" scoped>

</style>
